<div class="time-series-details absolute-fill">
    <div class="dynamic-container">
    </div>
    <div class="time-series-legend scroll">
        <div class="checkbox margin-bottom margin-bottom-md">
            <input id="connectPoints" class="styled" type="checkbox" data-bind="checked: connectPoints">
            <label for="connectPoints">
                Connect Points
            </label>
        </div>
        <h4 class="ts-legend-header">LEGEND</h4>
        <div class="flex-grow" style="position: relative">
            <div data-bind="foreach: allTimeSeries">
                <div data-bind="text: sectionName" class="section-name margin-top"></div>
                <div class="legend" data-bind="foreach: series">
                    <div class="checkbox">
                        <input type="checkbox" data-bind="attr: { id: uniqueId }, checked: visible" />
                        <label data-bind="attr: { for: uniqueId }">
                            <span data-bind="attr: { class: $root.getColorClass($data) + ' ' + $parent.type }">
                                <i data-bind="attr: { class: $root.getIcon($parent.type) }" class="icon-graph"></i>
                            </span>
                            <span data-bind="text: name"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="color-definitions">
        <div class="color-1"></div>
        <div class="color-2"></div>
        <div class="color-3"></div>
        <div class="color-4"></div>
        <div class="color-5"></div>
        <div class="color-6"></div>
        <div class="color-7"></div>
        <div class="color-8"></div>
        <div class="color-9"></div>
        <div class="color-10"></div>
    </div>
    <div class="tooltip ts-tooltip" style="opacity: 0; display: none">
    </div>
</div>
